<template>
  <div class="Admin-box">
    <div v-show="isShow">
      <el-button
        type="primary"
        class="addAdmin"
        @click="addEdit"
        style="margin-left: -700px"
        >添加管理员</el-button
      >
      <el-table :data="tableData" style="width: 850px; margin: 0 auto">
        <el-table-column label="编号" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="100">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号(后台登录)" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.telphone }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开通日期" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限" width="120">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper" prop="apower">{{scope.row.permission}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="!isShow" class="admin-set">
      <el-form ref="form" :model="form" label-width="120px" style="width: 100%">
        <h3 style="margin: 10px 0">管理员设置</h3>
        <el-form-item label="姓名:">
          <el-input
            v-model="form.name"
            style="width: 50%; float: left"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input
            v-model="form.phone"
            style="width: 50%; float: left"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input
            v-model="form.password"
            style="width: 50%; float: left"
          ></el-input
          ><span style="color: red">*若不修改密码，请留空</span>
        </el-form-item>
        <div
          style="
            background: gray;
            margin: 0 auto;
            height: 50px;
            line-height: 50px;
          "
        >
          权限配置
        </div>
        <el-form-item label="成员管理：">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="主持人管理" name="type"></el-checkbox>
            <el-checkbox label="新人管理" name="type"></el-checkbox>
            <el-checkbox label="婚庆公司管理" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="成员订单中心：">
          <el-checkbox-group v-model="form.orderCenter">
            <el-checkbox label="主持人订单中心" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="内容管理：">
          <el-checkbox-group v-model="form.content">
            <el-checkbox label="banner管理" name="type"></el-checkbox>
            <el-checkbox label="首页推荐管理" name="type"></el-checkbox>
            <el-checkbox label="底部文案" name="type"></el-checkbox>
            <el-checkbox label="合作伙伴管理" name="type"></el-checkbox>
            <el-checkbox label="加入团队文案" name="type"></el-checkbox>
            <el-checkbox label="关于团队介绍" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="后台管理：">
          <el-checkbox-group v-model="form.back">
            <el-checkbox label="管理员配置" name="type"></el-checkbox>
            <el-checkbox label="主持人等级设置" name="type"></el-checkbox>
            <el-checkbox label="管理费记录" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sure" style="margin: 0 auto"
            >确定</el-button
          >
          <el-button type="primary" @click="submit" style="margin: 0 auto"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import api from "../../../api";

export default {
  name: "Admin",
  data() {
    return {
      isShow: true,
      form: {
        name: "",
        phone: "",
        password: "",
        type: [],
        orderCenter: "",
        content: [],
        back: [],
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        resource: "",
        desc: "",
      },
      tableData: [],
      codeId:''
    };
  },
  methods: {
    addEdit(){
      this.isShow = !this.isShow;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.codeId=row.id
      this.isShow = !this.isShow;
    },
    //删除管理员
    handleDelete(index, row) {
      console.log(index, row);
      api
        .getDeleteAdmin({
          id:row.id,
        })
        .then((res) => {
          console.log(res.data);
        });
    },
    //编辑管理员信息
    sure() {
      var date = new Date();
      var toDate = date.toLocaleDateString();
      var sureId = this.codeId
      // console.log(this.codeId);
      api
        .getUpdateAdmin({
          id:sureId,
          username: this.form.name,
          password: this.form.password,
          phone: this.form.phone,
          type: this.form.type,
          time: toDate,
        })
        .then((res) => {
          console.log(res.data);
        });
      this.isShow = !this.isShow;
    },
    //添加管理员
    submit() {
      var date = new Date();
      var toDate = date.toLocaleDateString();
      api
        .getInsertAdmin({
          username: this.form.name,
          password: this.form.password,
          phone: this.form.phone,
          type: this.form.type,
          time: toDate,
        })
        .then((res) => {
          console.log(res.data);
        });
      this.isShow = !this.isShow;
    },
  },
  mounted() {
    api.getSearchAdmin({ search: "" }).then((res) => {
      console.log(res.data);
      for (let i = 0; i < res.data.length; i++) {
        this.tableData.push({
          id: res.data[i].aid,
          date: res.data[i].starttime,
          name: res.data[i].aname,
          telphone: res.data[i].aphone,
          permission: res.data[i].apower,
        });
      }
    });
  },
};
</script>

<style scoped>
.admin-set {
  margin: 0 50px;
  border: 1px solid gray;
}
</style>